<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>考试模块</title>

    <!-- Path to Framework7 Library CSS-->
    <!--     <link rel="stylesheet" href="/vistor/resources/css/framework7.ios.min.css">
        <link rel="stylesheet" href="/vistor/resources/css/framework7.ios.colors.min.css">
         -->
    <script src="js/flexible.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/daterangepicker-bs3.css" rel="stylesheet">
    <link href="css/bootstrapValidator.min.css" rel="stylesheet">
    <link href="font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- <link rel="stylesheet" href="css/layer.css"> -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/index.css" />
    <script src="https://unpkg.com/vue"></script>
    <script src="js/jquery-1.12.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript" src="js/moment.js">
    </script>
    <script type="text/javascript" src="js/daterangepicker.js"></script>
    <script src="js/bootstrapValidator.min.js"></script>
    <script src="js/echarts.common.min.js"></script>
    <script src="js/layer.js"></script>
    <script src="js/index.js"></script>
    <script>
          //localStorage.removeItem("userid");
          //localStorage.removeItem("username");
    </script>

</head>

<body>
    <div id="page-wrapper" class="">
        <div id="page-container" class="header-fixed-top sidebar-visible-lg-full">
            <!-- Main Container -->
            <div id="main-container" class="container">
                <!-- Page content -->
                <div id="page-content" class="row">
                    <!-- 页头开始 -->

                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64"
                        text-color="#fff" active-text-color="#ffd04b">
                        <el-menu-item index="1">首页</el-menu-item>
                        <el-submenu index="2">
                            <template slot="title">考试管理</template>
                            <el-menu-item index="2-1">试卷管理</el-menu-item>
                            <el-menu-item index="2-2">题目管理</el-menu-item>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">系统管理</template>
                            <el-menu-item index="3-1">权限管理</el-menu-item>
                            <el-menu-item index="3-2">目录管理</el-menu-item>
                            <el-menu-item index="3-3">日志管理</el-menu-item>
                        </el-submenu>

                        <el-menu-item index="4">登录</el-menu-item>
                    </el-menu>
                    <div class="block">
                        
                        <el-dialog title="在下面的输入框中输入问题详情" :visible.sync="addQ" @open="show">
                            <el-form ref="form" :model="form" label-width="80px" size="mini">
                                <el-form-item  label="问题标题" prop="name" :rules="[ { required: true, message: '请输入问题标题', trigger: 'blur' }]">
                                    <el-input v-model="form.name"></el-input>
                                </el-form-item>
                                <el-form-item label="问题描述">
                                    <el-input v-model="form.decs"></el-input>
                                </el-form-item>
                                <el-form-item label="所属部门" prop="dept" :rules="[ { required: true, message: '请输入问题所属部门', trigger: 'blur' }]">
                                    <el-input v-model="form.dept">
                                        <template slot="append">部</template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="问题分数" prop="score" :rules="[ { required: true, message: '请输入问题分数', trigger: 'blur' }]">
                                    <el-input v-model="form.score">
                                        <template slot="append">分</template>
                                    </el-input>
                                </el-form-item>
                                <input type="hidden" v-model="form.id">
                            </el-form>
                            <table class="table addOption" v-html="option">
                            </table>
                            <div class="alterItem" v-if="type=='1' || type== 2">
                                <button class="btn btn-default" onclick="delChoice()">减少选项</button>
                                <button class="btn btn-default" @click="addChoice">增加选项</button>
                            </div>

                            <hr>
                            <div class="addBtnGroup">
                                <button class="btn btn-primary" v-if="submit" @click="isOpen && submitForm('form')">提交</button>
                                <button class="btn btn-success" v-if="!submit" @click="isOpen && submitForm('form')">保存</button>
                            </div>
                        </el-dialog>


                        <div class="test-list">
                            <el-row type="flex" justify="space-around" align="middle">

                                <div class="handle-box">
                                    <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
                                    <el-button type="primary" icon="search" @click="search">搜索</el-button>
                                </div>

                                <div class="add-qs">
                                    <el-popover ref="popover2" placement="bottom" transition trigger="click">
                                        <el-row type="flex" class="row-bg" :gutter=10>
                                            <el-col :span="6">
                                                <el-button type="primary" @click="handleAdd(1)" >单选</el-button>
                                            </el-col>
                                            <el-col :span="6">
                                                <el-button type="primary" @click="handleAdd(2)">多选</el-button>
                                            </el-col>
                                            <el-col :span="6">
                                                <el-button type="primary" @click="handleAdd(4)">填空</el-button>
                                            </el-col>
                                            <el-col :span="6">
                                                <el-button type="primary" @click="handleAdd(5)">问答</el-button>
                                            </el-col>
                                        </el-row>
                                    </el-popover>
                                    <el-button v-popover:popover2>+&nbsp;&nbsp;新建问题</el-button>
                                    <!-- <el-button type="danger" class="add-btn" @click="handleAdd()">+&nbsp;&nbsp;新建问卷</el-button> -->
                                </div>
                            </el-row>
                            <el-table :data="data" style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
                                <el-table-column type="expand">
                                    <template slot-scope="props">
                                        <el-form label-position="left" inline class="demo-table-expand">
                                            <el-form-item label="题目 ID">
                                                <span>{{ props.row.id }}</span>
                                            </el-form-item>
                                            <el-form-item label="题目描述">
                                                <span>{{ props.row.description }}</span>
                                            </el-form-item>
                                            <el-form-item label="题目所属部门">
                                                <span>{{ props.row.dept }}</span>
                                            </el-form-item>
                                            <el-form-item label="题目使用次数">
                                                <span>{{ props.row.count }}次</span>
                                            </el-form-item>
                                            <el-form-item label="创建人">
                                                <span>{{ props.row.creatorName }}</span>
                                            </el-form-item>
                                            <el-form-item label="创建时间">
                                                <span>{{ props.row.createTime }}</span>
                                            </el-form-item>
                                            <el-form-item label="最后修改人">
                                                <span>{{ props.row.finalUpdateName }}</span>
                                            </el-form-item>
                                            <el-form-item label="最后修改时间">
                                                <span>{{ props.row.finalUpdateTime }}</span>
                                            </el-form-item>
                                            <template v-if="props.row.hasSelect">
                                                <el-form-item label="正确选项">
                                                    <span>{{ props.row.rightOptions }}</span>
                                                </el-form-item>                                               
                                                <el-form-item label="其它选项">
                                                    <span>{{ props.row.errorOptions }}</span>
                                                </el-form-item>
                                            </template>
                                            <template v-else>
                                                <el-form-item label="正确答案">
                                                    <span>{{ props.row.answerWord }}</span>
                                                </el-form-item>
                                            </template>
                                        </el-form>
                                    </template>
                                </el-table-column>

                                <el-table-column label="试卷名称" prop="name" show-overflow-tooltip align="center">
                                </el-table-column>

                                <el-table-column label="类别" prop="type" align="center">
                                </el-table-column>

                                <el-table-column label="操作" align="center">
                                    <template slot-scope="scope">
                                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="pagination pull-right">
                                <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="totalRows" :page-size="size">
                                </el-pagination>
                            </div>
                        </div>
                    </div>

                    <!-- <div class="previous-container">
                        </div>    -->

                </div>
                <!-- END Main Container -->
            </div>
            <!-- END Page Container -->
        </div>
        <footer id="footer" class="copyright">
            <p>© 高新兴集团股份有限公司 IT流程体系部 </p>
            <p>© Gosuncn Technology Group Co.,Ltd.</p>
            <p>All rights reserved.</p>
        </footer>
    </div>

    <!-- END Page Wrapper -->
    <!-- jQuery, Bootstrap, jQuery plugins and Custom JS code -->
    <!-- <script type="text/javascript" src="https://g.alicdn.com/dingding/dingtalk-pc-api/2.7.0/index.js"></script> -->



    <script>
        new Vue({
            el: '#page-wrapper',
            data() {
                return {
                    activeIndex: '2-2',
                    url: 'http://192.168.18.205/exam-api/question/page',
                    tableData: [],
                    cur_page: 1,
                    size: 9,
                    totalRows: 10,
                    select_word: '',
                    is_search: false,
                    type: '',
                    option:'',
                    addQ: false,
                    submit: true,
                    form: {
                        domains: [{
                            value: ''
                        }]
                    },
                    isOpen: false
                }
            },
            created() {
                this.getData();
            },
            computed: {
                data() {
                    const self = this;
                    if (self.tableData.length > 0) {
                        return self.tableData.filter(function (d) {
                            if (d.name.indexOf(self.select_word) > -1 || d.deptType.indexOf(self.select_word) > -1 || d.description.indexOf(self.select_word) > -1) {
                                return d;
                            }
                        })
                    }

                },
                username() {
                    let username = localStorage.getItem('ms_username');
                    return username ? username : this.name;
                }
            },
            methods: {
                handleSelect(key, keyPath) {
                    console.log(key, keyPath)
                    if (key == "1") {
                        location.href = "test.html";
                    } else if (key == "2-1") {
                        location.href = "index.html";
                    } else if (key == "2-2") {
                        location.href = "questions.html";
                    } else if (key == "3") {
                        location.href = "index.html";
                    } else if (key == "4") {
                        location.href = "login.html"
                    }
                },
                handleCurrentChange(val) {
                    this.cur_page = val;
                    this.getData();
                },
                getData() {
                    let self = this;
                    $.ajax({
                        method: 'get',
                        url: self.url,
                        data: { offset: self.cur_page, size: self.size },
                        success: function (res) {
                            
                            $.each(res.resources, function (index, val) { 
                                if (val.type == "1") {
                                    val.type = "单选";
                                    val.hasSelect = true;
                                } else if (val.type == "2") {
                                    val.type = "多选";
                                    val.hasSelect = true;
                                } else if (val.type == "3") {
                                    val.type = "判断";
                                } else if (val.type == "4") {
                                    val.type = "填空";
                                    val.hasSelect = false;
                                } else if (val.type == "5") {
                                    val.type = "问答";
                                    val.hasSelect = false;
                                }
                            });
                            
                            console.log(res);
                            
                            self.totalRows = res.totalRows;
                            self.tableData = res.resources;
                        }
                    });
                    // self.$axios.post(self.url, {page:self.cur_page}).then((res) => {
                    //     self.tableData = res.list;
                    // })
                },
                search() {
                    this.is_search = true;
                },
                hideShadow() {
                    this.addQ = false;
                },
                addChoice() {
                    addChoice(this.type);
                },
                formatter(row, column) {
                    return row.address;
                },
                filterTag(value, row) {
                    return row.tag === value;
                },
                handleAdd(type) {
                    this.submit = true;
                    this.type = type;
                    this.addQ = true;
                    var choice_list = addQs(type);
                    this.option = choice_list;
                    $(".el-popover").hide();
                },
                handleEdit(index, row) {
                    let self = this;
                    self.$confirm('确认编辑该问题?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.ajax({
                            url: url + '/exam-api/question/list?qlist='+row.id,
                            type: 'get',
                            success: function (result) {
                                let data = result[0];
                                console.log(data);
                                
                                self.form.name = data.name;
                                self.form.desc = data.description;
                                self.form.dept = data.dept;
                                self.form.score = data.score;
                                self.form.id = data.id;
                                self.type = data.type;
                                self.submit = false;
                                self.addQ = true;
                                let edit_length = data.errorOptions.length + data.rightOptions.length;
                                let rightIndex = [];
                                for (let index = 0; index < data.rightOptions.length; index++) {
                                    rightIndex.push(index);
                                }
                                
                                let option_list = data.rightOptions.concat(data.errorOptions);
                                var choice_list = addQs(data.type, edit_length, rightIndex, option_list);
                                self.option = choice_list;
                            }
                        });

                    }).catch(() => {
                        self.$message({
                            type: 'info',
                            message: '已取消编辑'
                        });
                    });
                },
                handleDelete(index, row) {
                    let self = this;
                    self.$confirm('确认删除该问题?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.ajax({
                            url: '/exam-api/question/' + row.id + '/0',
                            type: 'post',
                            success: function (result) {
                                self.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                setTimeout(function () {
                                    window.location.reload();
                                }, 500)

                            }
                        });

                    }).catch(() => {
                        self.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },
                show () {
                    let self = this;
                    self.$nextTick(function () {
                        self.isOpen = true;
                    })
                },
                submitForm(formName) {
                    let self = this;
                    self.$refs[formName].validate((valid) => {
                        if (valid) {
                            self.$confirm('确定提交吗', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                let rightArr = [];
                                let errorArr = [];
                                let rightOptions = "";
                                let errorOptions = "";
                                let answerWord = "";
                                let choiceItem = $('.choiceRow');
                                if (self.type == "1" || self.type == "2") {
                                    $.each(choiceItem, function (index, val) {
                                        if ($(this).find("input:checked").length == 1) {
                                            rightArr.push($(this).find(".choiceItem").val());
                                        } else {
                                            errorArr.push($(this).find(".choiceItem").val());
                                        }
                                    });
                                    rightOptions = rightArr.join("-&-");
                                    errorOptions = errorArr.join("-&-");
                                } else if (self.type == "4") {
                                    answerWord = $('.blankAnswer').val();
                                } else if (self.type == "5") {
                                    answerWord = $('.QAAnswer').val();
                                }
                                if (self.submit) {
                                    let data = {
                                        "title": self.form.name,
                                        "type": self.type,
                                        "description": self.form.decs,
                                        "dept": self.form.dept,
                                        "score": self.form.score,
                                        "rightOptions": rightOptions,
                                        "errorOptions": errorOptions,
                                        "answerWord": answerWord
                                    }
                                    $.ajax({
                                        type: "post",
                                        url: "/exam-api/question/addition",
                                        data: data,
                                        success: function (res) {
                                            self.$message({
                                                type: 'success',
                                                message: '提交成功!'
                                            });
                                            setTimeout(function () {
                                                window.location.reload();
                                            }, 500) 
                                        }
                                    });
                                } else {
                                    let data = {
                                        "id": self.form.id,
                                        "status": 1,
                                        "title": self.form.name,
                                        "type": self.type,
                                        "description": self.form.decs,
                                        "dept": self.form.dept,
                                        "score": self.form.score,
                                        "rightOptions": rightOptions,
                                        "errorOptions": errorOptions,
                                        "answerWord": answerWord
                                    }
                                    $.ajax({
                                        type: "post",
                                        url: "/exam-api/question/update",
                                        data: data,
                                        success: function (res) {
                                            self.$message({
                                                type: 'success',
                                                message: '提交成功!'
                                            });
                                            setTimeout(function () {
                                                window.location.reload();
                                            }, 500)
                                        }
                                    });
                                }
                            }).catch(() => {
                                self.$message({
                                    type: 'info',
                                    message: '已取消提交'
                                });

                            });
                        } else {
                            console.log('提交失败!!');
                            return false;
                        }
                    });
                },
            }
        })
        
    </script>

</body>

</html>